<template>
  <el-dialog
      v-model="typeDetailVisible"
      title="查看工装夹具类型详情"
      width="50%"
  >
    <template #default>
      <el-descriptions >
        <el-descriptions-item label="类型编码">{{type.toolTypeCode}}</el-descriptions-item>
        <el-descriptions-item label="类型名称">{{type.toolTypeName}}</el-descriptions-item>
        <el-descriptions-item label="是否编码管理">
          <el-tag type="info" v-if="type.codeManage == 1">是</el-tag>
          <el-tag type="success" v-else-if="type.codeManage == 2">否</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="保养维护类型">
          {{type.maintainType}}
        </el-descriptions-item>
        <el-descriptions-item label="保养周期">
          {{type.serviceInterval}}
        </el-descriptions-item>
        <el-descriptions-item label="备注" aria-colcount="3">
          <div v-html="type.toolTypeNotes"></div>
        </el-descriptions-item>
      </el-descriptions>
    </template>
    <template #footer>
      <el-button @click="typeDetailVisible = false">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, watch} from "vue";
import ledgerRequest from "@/api/ledger.js";
import maintainPlanRequest from "@/api/maintainPlan.js";
import toolsTypeRequest from "@/api/toolsType.js";
// 申明组件的属性
const props = defineProps(['toolTypeId']);
// 弹窗标记
let typeDetailVisible = ref(false);
// 详情对象
let type = ref({})
// 通过id加载
function loadLedger(){
  toolsTypeRequest.selectById(props.toolTypeId,res=>{
    if(res.data){
      type.value = res.data;
      typeDetailVisible.value = true;
    }
  });
}
// 属性侦听
watch(()=>props.toolTypeId,()=>{
  if(props.toolTypeId){
    loadLedger();
  }
});

</script>
<style scoped>

</style>